<template>
  <Button type="primary" style="margin-left: 12px;" @click="submit()">保存</Button>

  <!-- <Modal title="提交内容" v-model:visible="visible" :destroyOnClose="true" :footer="null">
    <Form ref="formRef" :model="reportState" name="basic" autocomplete="off" @finish="submit">
      <Form.Item label="报告名称" name="report_name" :rules="[{ required: true, message: '请输入报告名称!' }]">
        <Input v-model:value="reportState.report_name" style="width: 400px;" placeholder="请输入报告名称" />
      </Form.item>

      <Form.Item label="报告分类" name="trade_id" :rules="[{ required: true, message: '请选择报告分类!' }]">
        <Select v-model:value="reportState.trade_id" style="width: 400px;">
          <Select.Option :key="tradeInfo.id" v-for="tradeInfo in tradeArr" :value="tradeInfo.id">
            {{ tradeInfo.trade_name }}
          </Select.Option>
        </Select>
      </Form.Item>

      <Form.Item style="text-align: center;">
        <Button type="primary" html-type="submit">确认</Button>
        <Button style="margin-left: 12px;" @click="showVisible(false)">取消</Button>
      </Form.Item>
    </Form>
  </Modal> -->

  <FullscreenSpin :loading="exporting" tip="正在提交..." />
</template>

<script lang="ts" setup>
import useExport from '@/hooks/useExport'
import { useAskStore, useSlidesStore } from '@/store'
import { storeToRefs } from 'pinia'
import { computed, reactive, ref } from 'vue'
import {
  Button, message, Modal, Input, Select, Form, FormInstance
} from 'ant-design-vue'
import FullscreenSpin from '@/components/FullscreenSpin.vue'
import { slides as SLIDES } from '@/mocks/slides'

interface ReportState {
  report_name: string
  trade_id: string | null
}

const askStore = useAskStore()
const slidesStore = useSlidesStore()
const { submit_pdf_url, group_id, record_id, type, tradeList } = storeToRefs(askStore)
const { slides } = storeToRefs(slidesStore)

const { exportPPTX } = useExport()
const exporting = ref<boolean>(false)
const visible = ref<boolean>(false)
const formRef = ref<FormInstance>()
const tradeArr = computed(() => tradeList.value)

const reportState = reactive<ReportState>({
  report_name: '',
  trade_id: null
})

const submit = (): void => {
  visible.value = false
  exporting.value = true
  exportPPTX(slides.value, true).then((result) => {
    const file = new File(
      [result],
      `${record_id.value}_${group_id.value}.pptx`,
      { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' }
    )

    const formData = new FormData()
    formData.append('files', file)
    formData.append('type', type.value)
    formData.append('record_id', record_id.value)
    formData.append('group_id', group_id.value)
    formData.append('ppt_content', JSON.stringify(slides.value))

    const res = http.post(submit_pdf_url.value, formData)
    res.then(respond => {
      message.info('提交成功！')
      slidesStore.setSlides(SLIDES)
      formRef.value?.resetFields()
      exporting.value = false
    })
  })
}

</script>

<style lang="scss" scoped>
.report-type-main {
  display: flex;
  align-items: center;
  margin-top: 24px;
}

.report-button-main {
  text-align: center;
  margin-top: 24px;
}
</style>